<template>
  <div class="dropdowm">
    <el-dropdown trigger="click" @command="change">
      <span :class="['el-dropdown-link', { active: chosenIndex === 0 }]">
        {{value}}<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item  v-for="(item,index) in options" :key="index" :command="item">{{item}}</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    <div :class="['hot', { active: chosenIndex === 1 }]" @click="hotChange">
      热度优先
    </div>

  </div>
</template>

<script>
import Block from "@/components/content/block/block.vue";

export default {
  name: "DropdownBlock",
  components: {Block},
  data(){
    return{
      options:[
          '综合排序',
          '好评排序',
          '播放量排序'
      ],
      value:'综合排序',
      chosenIndex:0,

    }
  },
  methods:{
    change(val){
      this.value = val
      this.chosenIndex = 0
    },
    hotChange(){
      this.chosenIndex = 1
      console.log('ee')
    }
  }
}
</script>

<style scoped lang="scss">
.dropdowm{
  display: flex;
  flex-direction: row;
  align-items: center;
  text-align: center;
  width: 100%;
  background-color: #E8E8E8;
  height: 40px;
  margin-top: -10px;
  justify-content: space-around;
  .hot{
    font-size: 15px;
  }
  .active{
    color: #ED7380;
  }
  .el-dropdown-link{

  }
}
</style>
